<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <link rel="stylesheet" href="css/shop-create.css">
</head>
<body>
<div class="layui-card main-panel">
    <div class="layui-card-header">商铺列表</div>
    <div class="layui-card-body">
        <div id="shop-table"></div>
    </div>
</div>
<script type="text/html" id="table-operation">
    <button onclick="handlers.updateShop(this)" class="layui-btn layui-btn-primary layui-btn-xs" data-id="{{ d.id }}">
        修改
    </button>
    <button onclick="handlers.resetPassword(this)" class="layui-btn layui-btn-primary layui-btn-xs"
            data-id="{{ d.id }}">
        重置密码
    </button>
    <button onclick="handlers.deleteShop(this)" class="layui-btn layui-btn-danger layui-btn-xs" data-id="{{ d.id }}">
        删除
    </button>
    <button onclick="handlers.setSn(this)" class="layui-btn layui-btn-danger layui-btn-xs" data-id="{{ d.id }}">
        设置二维码
    </button>
</script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="lib/layui/layui.js"></script>
<script>
    window.handlers = {
        deleteShop: function (e) {
            var id = $(e).attr('data-id');
            console.log('delete:', id);
            layer.msg('暂未支持');
        },
        updateShop: function (e) {
            var id = $(e).attr('data-id');
            window.location.href = 'shop-update.html?id=' + id;
        },
        resetPassword: function (e) {
            var id = $(e).attr('data-id');
            layer.prompt({
                formType: 1,
                value: '',
                title: '重置密码'
            }, function (value, index, elem) {
                if (value && value.length >= 6) {
                    doResetPassword(id, value, function (err) {
                        if (!err) {
                            layer.close(index);
                            layer.msg('重置密码成功');
                        } else {
                            layer.msg(err);
                        }
                    });
                } else {
                    layer.msg('密码至少6位');
                }
            });
        },
        setSn: function (e) {
            var id = $(e).attr('data-id');
            layer.prompt({
                formType: 0,
                value: '',
                title: '设置二维码SN'
            }, function (value, index, elem) {
                if (value && value.length === 10) {
                    doSetSn(id, value, function (err) {
                        if (!err) {
                            layer.close(index);
                            layer.msg('设置二维码成功');
                        } else {
                            layer.msg(err);
                        }
                    });
                } else {
                    layer.msg('请输入正常的二维码SN');
                }
            });
        }
    };

    function doResetPassword(id, password, fn) {
        $.post('backstage/shop/' + id + '/reset-password', {password: password}, function (res) {
            if (res.code === 200) {
                fn();
            } else {
                fn(res.msg);
            }
        }, 'json')
    }

    function doSetSn(id, sn, fn) {
        $.post('backstage/shop/' + id + '/set-sn', {sn: sn}, function (res) {
            if (res.code === 200) {
                fn();
            } else {
                fn(res.msg);
            }
        });
    }

    layui.use('table', function () {
        var table = layui.table;
        window.table = table;
        table.render({
            elem: '#shop-table',
            url: 'backstage/shop/list',
            cols: [[
                {field: 'id', title: '#', width: 80, fixed: 'left'},
                {field: 'name', title: '显示名称', width: 150, fixed: 'left'},
                {
                    field: 'logoUrl', title: 'Logo图片', width: 80, templet: function (data) {
                        return data.logoUrl ? '<img src="' + data.logoUrl + '">' : '无图片';
                    }
                },
                {field: 'loginName', title: '登录账户', width: 150},
                {field: 'phone', title: '电话', width: 150},
                {field: 'address', title: '详细地址', width: 200},
                {field: 'sn', title: '二维码SN', width: 100},
                {field: 'province', title: '省', width: 80},
                {field: 'city', title: '市', width: 80},
                {field: 'region', title: '区', width: 80},
                {field: 'dailyHours', title: '每日营业时间', width: 120},
                {
                    field: 'promotionImage', title: '活动图片', width: 100, templet: function (data) {
                        return data.promotionImage ? '<img src="' + data.promotionImage + '">' : '无图片';
                    }
                },
                {field: 'merchantNo', title: '商户号', width: 150},
                {field: 'terminalId', title: '终端号', width: 150},
                {field: 'accessToken', title: '支付令牌', width: 150},
                {field: 'generalPayUrl', title: '支付地址', width: 150},
                {field: 'createTime', title: '创建时间', width: 120},
                {field: 'updateTime', title: '更新时间', width: 120},
                {field: 'operation', title: '操作', width: 300, fixed: 'right', templet: '#table-operation'}
            ]],
            page: true
        });
    });
</script>
</body>
</html>
